<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="学科:" prop="subjectID">
      <el-select
        placeholder="请选择"
        style="width: 400px"
        v-model="form.subjectID"
      >
        <el-option
          v-for="item in courseList"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="目录:" prop="catalogID">
      <el-select
        v-model="form.catalogID"
        placeholder="请选择"
        style="width: 400px"
      >
        <el-option
          v-for="item in listList"
          :key="item.id"
          :label="item.directoryName"
          :value="item.directoryName"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="企业:" prop=" enterpriseID">
      <el-select
        v-model="form.enterpriseID"
        placeholder="请选择"
        style="width: 400px"
      >
        <el-option
          v-for="item in enterpriseList"
          :key="item.id"
          :label="item.shortName"
          :value="item.shortName"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="城市:" prop="province">
      <el-select
        v-model="form.province"
        placeholder="请选择"
        style="width: 198px; margin-right: 4px"
        @focus="provinces"
      >
        <el-option
          v-for="(item, index) in cityList"
          :key="index"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <el-select
        v-model="form.city"
        placeholder="请选择"
        style="width: 198px"
        @focus="citys"
      >
        <el-option
          v-for="(item, index) in citysList"
          :key="index"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="方向:" prop="direction">
      <el-select
        v-model="form.direction"
        placeholder="请选择"
        style="width: 400px"
      >
        <el-option
          v-for="(item, index) in directionList"
          :key="index"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="题型:" prop="questionType">
      <el-radio-group v-model="form.questionType">
        <el-radio
          v-for="(item, index) in questionTypeList"
          :key="index"
          :label="item.label"
          :value="item.label"
        ></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="难度:" prop="difficulty">
      <el-radio-group v-model="form.difficulty">
        <el-radio
          v-for="(item, index) in difficultyList"
          :key="index"
          :label="item.label"
          :value="item.label"
        ></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="题干:" prop="question">
      <!-- <el-input type="textarea" v-model="form.desc"></el-input> -->

      <div style="border: 1px solid #ccc">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 150px; overflow-y: hidden"
          v-model="form.question"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
        />
      </div>
    </el-form-item>
    <el-form-item label="选项:" prop="desc">
      <el-input type="text" v-model="form.options.title"></el-input>
    </el-form-item>
    <el-form-item label="解析视频:">
      <el-input v-model="form.videoURL" style="width: 400px"></el-input>
    </el-form-item>
    <el-form-item label="答案解析:" prop=" answer">
      <div style="border: 1px solid #ccc">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor2"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 150px; overflow-y: hidden"
          v-model="form.answer"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated2"
        />
      </div>
    </el-form-item>
    <el-form-item label="题目备注:" prop=" remarks">
      <el-input
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 10 }"
        v-model="form.remarks"
        style="width: 400px"
      ></el-input>
    </el-form-item>
    <el-form-item label="试题标签:">
      <el-select
        v-model="form.tags"
        placeholder="请选择"
        style="width: 400px"
        multiple
      >
        <el-option
          v-for="(item, index) in tagsList"
          :key="index"
          :label="item.tagName"
          :value="item.tagName"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">确定提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { simple } from '@/api/hmmm/subjects'
import { list } from '@/api/hmmm/directorys'
import { list as listname } from '@/api/hmmm/companys'
import { list as tagsList } from '@/api/hmmm/tags'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
// console.log(provinces())
// console.log(citys('北京市'))
export default {
  data () {
    return {
      form: {
        id: '', // id
        subjectID: '', // 学科
        catalogID: '', // 目录
        questionType: '', // 题型
        difficulty: '', // 难度
        question: '', // 题干
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        answer: '', // 答案解析
        direction: '', // 方向
        options: { code: '', title: '', img: '', isRight: '' }, // 选项
        tags: '', // 试题标签
        remarks: '', // 题目备注
        videoURL: '' // 解析视频
      },
      courseList: '', // 学科列表
      listList: '', // 目录列表
      enterpriseList: '', // 企业列表
      directionList: direction, // 方向列表
      cityList: '', // 地区列表
      citysList: '', // 分地区列表
      questionTypeList: questionType, // 题型
      difficultyList: difficulty, // 难度
      tagsList: '', // 试题列表
      rules: {
        subjectID: [{ required: true, message: '入职时间', trigger: 'blur' }],
        catalogID: [{ required: true, message: '入职时间', trigger: 'blur' }],
        direction: [{ required: true, message: '入职时间', trigger: 'blur' }],
        questionType: [
          { required: true, message: '入职时间', trigger: 'blur' }
        ],
        enterpriseID: [
          { required: true, message: '入职时间', trigger: 'blur' }
        ],
        difficulty: [{ required: true, message: '入职时间', trigger: 'blur' }],
        province: [{ required: true, message: '入职时间', trigger: 'blur' }],
        city: [{ required: true, message: '入职时间', trigger: 'blur' }]
      },
      editor: null,
      toolbarConfig: {
        toolbarKeys: [
          // // 菜单 key
          // 'headerSelect',

          // // 分割线
          // '|',

          // 菜单 key
          'bold',
          'underline',
          'italic',
          'through',
          'bulletedList',
          'numberedList',
          'blockquote',
          'codeBlock',
          'insertImage',
          'insertLink'

          // 菜单组，包含多个菜单
          // {
          //   key: 'group-more-style', // 必填，要以 group 开头
          //   title: '更多样式', // 必填
          //   iconSvg: '<svg>....</svg>', // 可选
          //   menuKeys: ['through', 'code', 'clearStyle'] // 下级菜单 key ，必填
          // }
          // 继续配置其他菜单...
        ]
      },
      editorConfig: { placeholder: '' },
      editor2: null,
      mode: 'simple' // or 'simple'
    }
  },
  created () {
    this.form.id = this.$route.query.id ? this.$route.query.id : ''
    this.courseFn()
    this.listFn()
    this.enterpriseFn()
    this.tagsListFn()
  },
  methods: {
    onSubmit () {
      // console.log('submit!')
      // console.log(this.editor.getAllMenuKeys())
      // console.log(this.form.course)
      console.log(this.form.list)
    },
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onCreated2 (editor) {
      this.editor2 = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    // 获取学科列表
    async courseFn () {
      const { data } = await simple()
      this.courseList = data
      // console.log(this.courseList)
    },
    // 获取目录列表
    async listFn () {
      const { data } = await list()
      this.listList = data.items
      // console.log(this.listList)
    },
    // 获取企业列表
    async enterpriseFn () {
      const { data } = await listname()
      this.enterpriseList = data.items
      // console.log(this.enterpriseList)
    },
    // 获取地区列表
    provinces () {
      this.cityList = provinces()
      this.form.city1 = ''
    },
    // 获取分地区列表
    citys () {
      this.citysList = citys(this.form.city)
    },
    // 获取试题列表
    async tagsListFn () {
      const { data } = await tagsList()
      this.tagsList = data.items
    }
  },

  components: { Editor, Toolbar }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css">
</style>
<style lang="scss" scoped>
</style>
